<template>
  <div>
    <h2 class="list-type">全部歌单</h2>
    <div class="all-songlist-wrap">
      <div
        v-for="item in songLists"
        :key="item.id"
        @click="goListContent(item.id)"
        class="each-songlist-wrap"
      >
        <div class="img-wrap">
          <img v-lazy="item.coverImgUrl" alt="" />
          <span class="user-icon">
            <span class="icon-我的"></span>
            {{ item.creator && item.creator.nickname }}
          </span>
          <span class="erji-icon">
            <span class="icon-耳机"></span>
            <span v-if="item.playCount > 100000">
              {{ Math.floor(item.playCount / 10000) }}万
            </span>
            <span v-else>
              {{ item.playCount }}
            </span>
          </span>
        </div>
        <div class="">
          {{ item.name }}
        </div>
      </div>
    </div>
    <mu-infinite-scroll
      :loadingText="loadingText"
      :loading="loading"
      @load="() => fetchData().then()"
    />
  </div>
</template>

<script lang="ts">
import { APIType } from "@/api";
import { CommonIdType } from "@/model/id-or-enum.model";
import { SongListInfo } from "@/model/music-info.model";
import _ from "lodash";
import { Vue, Component } from "vue-property-decorator";
import Router from "vue-router";
@Component({})
export default class SongListComponent extends Vue {
  songLists: SongListInfo[] = [];
  loading = false;
  loadingText = "努力加载中...";
  $router: Router;
  $api: APIType;
  public mounted() {
    this.fetchData().then();
    // this.scroller = this.$el
  }
  async fetchData() {
    const offset = this.songLists.length;
    this.loading = true;
    const result = await this.$api.getPlayList(offset, 10, "hot");
    this.songLists = _.concat(this.songLists, result.playlists);
    this.loading = false;
  }
  goListContent(id: CommonIdType) {
    // console.log(`/playList/${ind}`)
    this.$router.push({ path: `/playList/${id}` }).catch((err) => err);
  }
}
</script>

<style lang="scss" scoped>
.list-type {
  margin: 0.1rem;
  padding-left: 0.05rem;
  font-size: 0.16rem;
  color: #494949;
  border-left: 4px solid #ea4558;
}
.all-songlist-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.1rem;
  .each-songlist-wrap {
    width: 49%;
    margin-bottom: 0.15rem;
    font-size: 0.15rem;
    .img-wrap {
      position: relative;
      img {
        width: 100%;
        overflow: hidden;
        border: 1px solid #e5e9f2;
      }
      .user-icon {
        position: absolute;
        left: 0.1rem;
        bottom: 0.1rem;
        color: #fff;
      }
      .erji-icon {
        position: absolute;
        right: 0.1rem;
        top: 0.1rem;
        color: #fff;
      }
    }
  }
}
</style>
